<script setup lang="ts">
import { ref } from 'vue'

// 定义事件
const emit = defineEmits<{
  (e: 'login', credentials: { username: string; password: string }): void
  (e: 'register', credentials: { username: string; password: string }): void
}>()

const username = ref('')
const password = ref('')
const isRegistering = ref(false) // 控制是否显示注册表单

// 切换登录/注册模式
const toggleMode = () => {
  isRegistering.value = !isRegistering.value
  username.value = ''
  password.value = ''
}

// 提交表单
const handleSubmit = () => {
  const eventName = isRegistering.value ? 'register' : 'login'
  emit(eventName, { username: username.value, password: password.value })
}
</script>

<template>
  <section class="nes-container with-title login-form">
    <h3 class="title">{{ isRegistering ? '注册账号' : '登录游戏' }}</h3>
    <form @submit.prevent="handleSubmit" class="form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input 
          id="username"
          v-model="username" 
          type="text" 
          class="nes-input"
          required
          placeholder="请输入用户名"
          autocomplete="username"
        />
      </div>
      
      <div class="form-group">
        <label for="password">密码</label>
        <input 
          id="password"
          v-model="password" 
          type="password" 
          class="nes-input"
          required
          placeholder="请输入密码"
          autocomplete="current-password"
        />
      </div>

      <div class="buttons">
        <button 
          type="submit" 
          class="nes-btn is-primary"
        >
          {{ isRegistering ? '注册' : '登录' }}
        </button>
        
        <button 
          type="button"
          class="nes-btn is-warning"
          @click="toggleMode"
        >
          切换到{{ isRegistering ? '登录' : '注册' }}
        </button>
      </div>
    </form>
  </section>
</template>

<style scoped>
.login-form {
  width: 100%; /* 确保宽度为100% */
  height: 100%; /* 确保高度为100% */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

.form {
  width: 100%; /* 确保宽度为100% */
  height: 100%; 
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.8rem;
  padding-left: 0.5rem;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .buttons {
    flex-direction: row;
    justify-content: center;
  }
}

</style> 